<template>
	<div class="wrapper search">
		<v-head></v-head>
		<div class="content center align-start">
			<div class="left bfff">
				<div class="f33 fbold title center flex-start">
					<div class="hr"></div>
					<span>所属分类</span>
				</div>
				<el-tree
					@check="onCategoryCheck"
					ref="treeRef"
					:data="category"
					show-checkbox
					node-key="name"
					highlight-current
					:props="{ value: 'id', label: 'name', children: 'children' }"
				/>
			</div>

			<div class="flex right">
				<div class="right-top">
					<div class="center flex-start c60 type">
						<div class="f18" :class="{ cfff: formData.isVideo == 2 }" @click="onIsVideoChange(2)">
							主题知识库
						</div>
						<div class="f18" :class="{ cfff: formData.isVideo == 1 }" @click="onIsVideoChange(1)">
							企业视频课程库
						</div>
					</div>
					<div class="center flex-start fWrap posr">
						<el-select v-model="formData.type" class="search-type">
							<el-option label="全部" value="03" />
							<el-option label="标题" value="00" />
							<el-option label="全文" value="02" v-if="formData.isVideo == 2" />
							<el-option label="作者" value="01" />
							<el-option label="标签" value="04" />
						</el-select>
						<input
							type="text"
							placeholder="请输入"
							class="bfff"
							v-model="keywords"
							@keyup.enter="onSearch"
						/>
						<el-button type="primary" class="search-btn" :icon="Search" @click="onSearch"> 搜索 </el-button>
						<div class="c333 fbold f24 gaoji hover" @click="onOpenHeigh">高级搜索</div>
						<!-- 高级搜索 -->
						<div class="posa souSuo-alert" v-if="heighVisible">
							<el-button
								class="guanbi"
								:icon="CloseBold"
								@click="heighVisible = false"
								size="small"
							></el-button>
							<div class="center flex-start">
								<div class="label f31 c72">时间范围</div>
								<el-date-picker
									size="small"
									v-model="date"
									type="daterange"
									range-separator="-"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
									value-format="YYYY-MM-DD 00:00:00"
								/>
								<div class="hr"></div>
								<div class="c666 f20 hover" @click="onQuickyDate('week')">一周</div>
								<div class="hr"></div>
								<div class="c666 f20 hover" @click="onQuickyDate('month')">一月</div>
								<div class="hr"></div>
								<div class="c666 f20 hover" @click="onQuickyDate('year')">一年内</div>
							</div>
							<div class="flie">
								<div class="label f31 c72">文档类型</div>
								<div>
									<span
										@click="onChangeFileType('word')"
										class="flie-text"
										:class="{ flieText2: formData.fileType == 'word' }"
									>
										word
									</span>
									<span
										@click="onChangeFileType('zip')"
										class="flie-text"
										:class="{ flieText2: formData.fileType == 'zip' }"
									>
										zip
									</span>
									<span
										@click="onChangeFileType('pdf')"
										class="flie-text"
										:class="{ flieText2: formData.fileType == 'pdf' }"
									>
										pdf
									</span>
								</div>
							</div>
							<div class="center">
								<el-button @click="resetting" :icon="RefreshRight" class="refresh"> 重置 </el-button>
								<el-button @click="onSearch" :icon="Search" type="primary"> 检索 </el-button>
							</div>
						</div>
					</div>
					<div class="re center">
						<img src="@/assets/image/index/huo.png" class="huo-icon" alt="" />
						<div class="f22 c60 reci">热词：</div>
						<div class="flex center flex-start nowrap">
							<div
								class="cff9 hover f26 reci"
								v-for="item in hotList"
								:key="item.id"
								@click="onChangeHot(item)"
							>
								{{ item.name }}
							</div>
						</div>
					</div>
				</div>

				<div class="bfff right-main">
					<div class="center f31 screen fWrap">
						<div class="flex c333">
							全系统共检索到
							<span class="ctheme">
								{{ total }}
							</span>
							篇
						</div>
					</div>
					<div class="box center hover acline" v-for="(item, index) in list" :key="index">
						<div class="box-info flex">
							<div class="center flex-start nowrap" style="margin-top: 25px">
								<div class="f33 title nowrap">
									<div v-if="item.highlightFields.fileName">
										<div v-html="item.highlightFields.fileName[0]"></div>
									</div>
									<div v-else>{{ item.content.fileName }}</div>
								</div>
								<div class="c903 f20">
									{{ formatDate(item.content.fileDate || "", "YYYY-MM-DD") }} 发布
								</div>
							</div>
							<div class="c903 f25 author">
								<div class="hei">
									作者：
									<span v-if="item.highlightFields.fileOwner">
										<div v-for="item in item.highlightFields">
											<span class="hei" v-html="item.highlightFields.fileOwner[0]"></span>
										</div>
									</span>
									<span v-else>{{ item.content.fileOwner }}</span>
								</div>
								<div style="color: #000">
									来源：<span class="hei">{{ item.content.source }}</span>
								</div>
							</div>

							<div v-if="item.highlightFields.fileContent" class="conter-text">
								<div
									v-if="slideList.includes(item.id)"
									v-html="item.highlightFields.fileContent[0]"
								></div>
								<template v-else>
									<div v-for="it in item.highlightFields.fileContent">
										<div v-html="it"></div>
									</div>
								</template>
								<div v-if="slideList.includes(item.id)" @click="onSlideList(item)" class="dianjiAll">
									点击展开全部
								</div>
							</div>
							<div v-else class="conter-text1">{{ item.content.fileContent }}</div>
							<div class="c903 f25">
								标签：<span
									class="bq"
									v-for="(item, index) in item.content.fileTags"
									v-html="item"
								></span>
							</div>
						</div>
					</div>
					<div style="display: flex; justify-content: center">
						<v-pagination
							:total="+total"
							v-model:size="formData.pageSize"
							v-model:page="formData.pageNum"
							@pagination="fetchList"
							@paginations="fetchLists"
						></v-pagination>
					</div>
				</div>
				<el-empty v-if="!list.length" style="background-color: #fff; height: 600px" description="暂无数据" />
			</div>
		</div>
		<v-myfoot></v-myfoot>
	</div>
</template>

<script setup>
import { Search, Star, StarFilled, RefreshRight, CloseBold } from "@element-plus/icons-vue"
import { ref } from "vue"
import { useCategory } from "./modules/useCategory"
import { useList } from "./modules/useList"
import { useHot } from "./modules/useHot"
import { formatDate } from "/plugins/date"
import { useHeigh } from "./modules/useHeigh"

const { formData, total, list, getData, onSearch, onCurrentChange, keywords } = useList(reloadCategory)
const { category, onCategoryCheck, getCategory } = useCategory(formData, onSearch)
const { hotList } = useHot()
const { heighVisible, onOpenHeigh, date, onQuickyDate, onChangeFileType, resetting } = useHeigh(formData)

const slideList = ref([])
function onSlideList(item) {
	const index = slideList.findIndex(i => i == item.id)
	if (!~index) {
		slideList.splice(index, 1)
	} else {
		slideList.push(item.id)
	}
}

function reloadCategory() {
	getCategory()
}

function onIsVideoChange(isVideo) {
	formData.isVideo = isVideo

	if (formData.isVideo == 1 && formData.type == "02") {
		formData.type = "03"
	}

	onSearch()
}

function onChangeHot(hotItem) {
	formData.type = "04"
	keywords.value = hotItem.name

	onSearch()
}
</script>

<style lang="scss" scoped>
.emp {
	padding-top: 150px;
	.center {
		margin-bottom: 15px;
	}
}
.search {
	background-color: #f8f8f8;
	.content {
		.souSuo-alert {
			width: 65vw;
			background: #ffffff;
			border: 1px solid #2972fa;
			border-radius: 3px;
			padding: 25px 13px 13px;
			left: 0;
			top: 45px;
			white-space: nowrap;
			z-index: 82;
			:deep(.el-button) {
				width: 180px;
				height: 32px;
				border-radius: 3px;
				margin: 20px 8px 0;
			}

			:deep(.refresh) {
				background: #f3f3f3;
				color: #2972fa;
			}
			.guanbi {
				position: absolute;
				width: 20px;
				height: 20px;
				right: 10px;
				top: -10px;
			}
			.jia-icon {
				width: 20px;
				height: 20px;
				margin-left: 10px;
			}

			.center.flex-start {
				margin-bottom: 20px;
			}

			.text {
				margin-right: 10px;
			}

			:deep(.gaoji-search-type .el-input__wrapper) {
				width: 120px;
				height: 30px;
				border: 1px solid #dcdfe6;
				border-radius: 3px;
				box-shadow: none;
				margin-right: 10px;
			}

			:deep(.gaoji-search-type2 .el-input__wrapper) {
				width: 90px;
			}

			:deep(.gaoji-input) {
				width: 220px;
				height: 32px;
				border: 1px solid #dcdfe6;
				border-radius: 3px;
			}

			:deep(.gaoji-input .el-input__wrapper) {
				box-shadow: none;
				border-radius: 3px;
			}

			:deep(.el-date-editor) {
				margin-right: 15px;
				width: 300px;
				height: 30px;
				border: 1px solid #dcdfe6;
				border-radius: 3px;
				box-shadow: none;
			}

			.hr {
				width: 1px;
				height: 13px;
				background: #999999;
			}

			.c666 {
				width: 50px;
				height: 25px;
				border-radius: 5px;
				margin: 5px;
				text-align: center;

				&.btheme {
					color: #fff;
				}
			}

			.label {
				width: 115px;
				overflow: hidden;
			}
		}

		.right {
			padding-bottom: 20px;
			overflow-y: auto;
			min-height: 78vh;
			.hei {
				color: #000;
				padding-right: 10px;
			}
			.hei-right {
				padding-right: 15px;
			}
			.right-main {
				margin-right: 25px;
				padding: 20px 25px 0;

				.box {
					border-bottom: 1px solid #eceef5;
					padding: 10px 0;

					:deep(.el-button__text--expand) {
						margin-left: 5px;
					}

					:deep(.el-button) {
						height: 25px;
						line-height: 25px;
						padding: 0 7px;
						border-radius: 1px;
					}

					.author {
						padding: 10px 0 15px;
						display: flex;
						.authorName {
							margin-right: 30px;
						}
					}
					.conter-text {
						padding-right: 10px;
						padding-bottom: 13px;
						// display: -webkit-box; //对象作为弹性伸缩盒子模型显示
						// overflow: hidden; //溢出隐藏
						// -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
						// -webkit-line-clamp: 2; //设置 块元素包含的文本行数
						// margin-bottom: 20px;
					}
					.conter-text1 {
						padding-right: 10px;
						display: -webkit-box; //对象作为弹性伸缩盒子模型显示
						overflow: hidden; //溢出隐藏
						-webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
						-webkit-line-clamp: 2; //设置 块元素包含的文本行数
						margin-bottom: 13px;
					}
					.title {
						padding-right: 20px;
					}
					.bq {
						padding: 0 5px;
					}
				}

				.screen {
					.hover {
						padding-left: 15px;
					}
				}
			}

			.right-top {
				padding: 15px 0;
				.f18 {
					padding: 5px 10px 10px;
				}
				.re {
					padding-top: 10px;
					padding-left: 50px;
					.reci {
						line-height: 1.5;
					}
					.flex {
						overflow-x: scroll;
					}
				}

				.cff9 {
					margin-right: 20px;
				}

				.huo-icon {
					width: 13px;
					height: 15px;
					margin-right: 12px;
				}

				:deep(.search-btn) {
					width: 80px;
					height: 40px;
					background: #2972fa;
					border-radius: 0 5px 5px 0;
					letter-spacing: 5px;
					margin-right: 15px;
				}

				input {
					width: 60vw;
					height: 40px;
					border-bottom: 1px solid #2972fa;
					border-top: 1px solid #2972fa;
					padding: 0 14px;
					margin-left: -1px;
				}

				:deep(.search-type .el-input__wrapper) {
					width: 80px;
					height: 40px;
					border: 1px solid #2972fa;
					border-radius: 5px 0 0 5px;
					padding: 0 13px;
					font-size: 15px;
					color: #606266;
					box-shadow: none;
				}
			}

			.type {
				padding-bottom: 4px;

				.f31 {
					padding: 3px 12px 10px;
					cursor: pointer;

					&:hover {
						background: url(@/assets/image/search/search.png) no-repeat center bottom;
						background-size: 100% 100%;
						color: #fff;
					}
				}

				.cfff {
					background: url(@/assets/image/search/search.png) no-repeat center bottom;
					background-size: 100% 100%;
				}
			}
		}

		.left {
			margin: 150px 20px 15px 25px;
			width: 225px;

			:deep(.el-tree-node__expand-icon) {
				font-size: 15px;
			}

			:deep(.el-tree) {
				padding: 20px 0;
				color: #606266;
				font-size: 15px;
			}

			.title {
				border-bottom: 1px solid rgba(41, 114, 250, 0.1);
				padding: 20px 0 0 17px;

				span {
					border-bottom: 1px solid #2972fa;
					line-height: 2;
				}

				.hr {
					width: 4px;
					height: 14px;
					background: #2972fa;
					margin-right: 8px;
				}
			}
		}
		.acline {
			align-items: stretch;
		}
		.labels {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
		.content {
			padding: 0 50px;
		}
	}
}
.flie {
	display: flex;
	.flie-text {
		margin: 0 10px;
		cursor: pointer;
	}
	.flieText2 {
		color: #2972fa;
	}
}
.dianjiAll {
	display: flex;
	justify-content: center;
}
</style>
